<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script crossorigin="anonymous" integrity="sha512-UN8wX5Zf4Af6/2UJOYTYyWLHdua4SWMd1pnIxNoDCtqdaAMk1TQdvwwgoG7ShvuOS1d9jCerLNzwfvRmL7N4iA==" src="https://lib.baomitu.com/echarts/5.2.0/echarts.min.js"></script>
</head>
<body>
    <div id="app">
        <el-tabs>
            <el-tab-pane v-for="v in tables" :label="v.name">
                <el-table :data="v.data" >
                    <el-table-column v-for="vv in getFields(v.data)" :prop="vv" :label="vv">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <div style="margin-top: 20px;">
            <div v-for="v in charts" ref="chart" style="width: 500px; height: 400px;">

            </div>
        </div>
    </div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: function() {
            return {
                tables: [],
                charts: []
            }
        },
        methods:{
            getFields(list){
                var f = Object.keys(list[0] || [])
                return f
            }
        },
        mounted(){
            $.getJSON("./data.json", function (data){
                data.forEach(e => {
                    if(e.draw == 'table'){
                        e.data.forEach(e => {
                            app.tables.push(e)
                        })
                    } else if(e.draw == 'pie'){
                        app.charts.push(e.data)
                    }
                })
                app.$nextTick(_ => {
                    var dom = (app.$refs.chart);
                    console.log(dom)
                    var option = {
                        title: {
                            text: '',
                            subtext: '',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: 'score',
                                type: 'pie',
                                radius: '50%',
                                data: app.charts[0].map(e => {
                                    e.value = e.data
                                    return e
                                }),
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    console.log(option)
                    echarts.init(dom[0]).setOption(option);
                })
            })
        }
    })
</script>